iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 12
0
Modern Web

網頁程式設計so easy系列 第 12

Day11 [RWD & BootStrap]

  • 分享至 

  • xImage
  •  

viewport

瀏覽器中用來顯示網頁的部分,稱為Viewport,使用者就是透過viewport的區域來瀏覽網頁。在電腦上可調整瀏覽器的視窗小來改變viewport,在手機上viewport則相當於整個螢幕(扣掉上方的網址列等),無法任意縮放。
通常如果希望網頁能依照各設備之大小來調整網頁大小,可加入以下程式碼:
<meta name="viewport" content="width= device-width, initial-scale=1.0">

initial-scale顯示網頁的縮放比例可設為0~10.0之間的數值,數值小於1時表示將網頁縮小顯示;數值大於1則是放大。

想在電腦上測試手機瀏覽網頁效果,可使用開發者工具。
http://ithelp.ithome.com.tw/upload/images/20161212/20103385nK2J9Q4FKU.png
http://ithelp.ithome.com.tw/upload/images/20161212/20103385f5hIoaeovc.png
可依照手持設備設定或是直接更改長寬來看顯示結果。

CSS3 Media Query

@media(max-width: 600px){
    body{ font-size: 16px }
}

當瀏覽器寬度小於600px時,將body裡的字型調成16px。

使用此種方法就可以訂定很多種規格,並分別設定各種規格所要呈現網頁的方式。

Bootstrap

Bootstrap是一套建構於jQuery之上的網頁設計框架。它可以快速完成RWD手機網頁。

Bootstrap_格狀版面

為了方便製作RWD網頁,Bootstrap已定義好一套CSS樣式,只要利用其中預先定義好的類別,即可建立基本的RWD網頁版面。

Bootstrap CSS是採用格狀系統來規劃版面。它將畫面依寬度評分為12等分。再利用這12等分來劃分版面。
<div class="col-xs-2 col-md-3">
當瀏覽器尺寸在XS時,div會佔12等分的2分;當瀏覽器尺寸在M時,div會佔12等分的3分。

Bootstrap在類別名稱中版面寬度等級如下:

縮寫 每一格的寬度 容器寬度 適用畫面寬度
xs 依手機畫面寬度調整 手機畫面寬度 < 768px
sm ~62px 750px >= 768px
md ~81px 970px >=992px
lg ~97px 1170px >=1200px

Bootstrap_表格樣式

<div class="table-responsive">
  <table class="table table-hover">
      ...
  </table>
</div>
  • table-hover
  • table-striped
  • table-bordered

範例

Bootstrap_巡覽列navbar

http://ithelp.ithome.com.tw/upload/images/20161213/20103385jsE6l4hM4Y.png
http://ithelp.ithome.com.tw/upload/images/20161213/20103385yEafUg7hxx.png

範例

使用Bootstrap建立輪播元件

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
    ...
</div>

範例

Bootstrap主題下載

https://www.bootstrapzero.com/
https://bootswatch.com/
https://startbootstrap.com/

Bootstrap開發工具

http://www.layoutit.com/build
https://www.boottheme.com/app/
http://www.bootply.com/


上一篇
Day10 [jQuery]
下一篇
Day12 [AJAX]
系列文
網頁程式設計so easy30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言